<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>编辑角色权限</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
	<h1 style="margin-bottom: 20px;">角色名</h1>
	<!-- 表单区+返回按钮 -->
	<div style="background-color: white;">
		<div class="layui-row">
			<!-- 返回按钮 -->
			<div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-left"></i>返回</button>
			</div>
		</div>
		<!-- 角色权利表格 -->
		<table class="layui-hide" id="tb_role_menu" lay-filter="filter_role_menu"></table>
		<!-- 表格工具列 -->
		<script type="text/html" id="bar_roleEdit">
			<input lay-event="edit" type="checkbox">
		</script>
	</div>
</body>
<script>
	// 表格模块
	layui.use('table', function(){
		var table = layui.table;

		table.render({
			elem:'#tb_role_menu',//在指定dom对象上渲染表格
			url:'/roleManage/getRolePower.do',//异步数据接口
			title: '角色表',
			cols: [[//表头
				{field:'menu_id', title:'ID'},
				{field:'menu_name', title:'名称'},
				{field:'menu_url', title:'路径'},
				{field:'isShow', title:'是否有权',hidden:true},
				{title:'开启权限', toolbar: '#bar_roleEdit'}
			]]
		});

		//监听行工具事件
		//注：tool 是工具条事件名，filter_role 是 table 原始容器的属性 lay-filter="对应的值"
		table.on('tool(filter_role_menu)', function(obj){

			var data = obj.data;//当行数据
			var event = obj.event;//按钮类型
			if(event == 'del'){

			}
		});
	});
</script>
</html>